/* components */
import { 
  SettingGPTViewDialog,
  SettingGPTViewTable
} from '@src/modules/setting/gpt/components'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import { FieldTypeMappingEnum } from '@model/enum/FieldMappingEnum'
/* hooks */
import { useFetchSettingGPTGenerateSimilarQuestions, useSettingListTable } from '@gpt/hooks'
/* vue */
import { defineComponent, PropType, Ref, ref } from 'vue'
/* types */
import Column from '@model/types/Column'
/* utils */
import { settingListFieldsToColumns } from '@gpt/utils'
import { useTenantId } from '@hooks/useRootWindow'
import { isFalsy } from '@src/util/type'
import item from '@src/component/common/BaseSelectUser/components/Department/item'

type SettingGPTViewDialogComponent = InstanceType<typeof SettingGPTViewDialog>
type SettingGPTViewTableComponent = InstanceType<typeof SettingGPTViewTable>

enum SettingGPTSimilarQuestionDialogEventEnum {
  Input = 'input',
  Confirm = 'confirm'
}

type TableValueType  = {
  question: string
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTSimilarQuestionDialog,
  props: {
    question: {
      type: String,
      default: ''
    },
    onConfirm: {
      type: Function as PropType<(questions: string[]) => void>,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    
    const { 
      fetchGenerateSimilarQuestions, 
      similarQuestions, 
      loading
    } = useFetchSettingGPTGenerateSimilarQuestions()
    
    const { handleSelectionChange, multipleSelection } = useSettingListTable<TableValueType>(emit)
    const tenantId = useTenantId()
    
    return {
      fetchGenerateSimilarQuestions,
      multipleSelection,
      handleSelectionChange,
      similarQuestions,
      loading,
      tenantId
    }
    
  },
  data() {
    return {
      insideQuestion: this.question
    }
  },
  computed: {
    settingGPTViewDialogComponent(): SettingGPTViewDialogComponent {
      return this.$refs.SettingGPTViewDialog as SettingGPTViewDialogComponent
    },
    columns(): Column[] {
      
      const fields = [
        {
          displayName: "相似问题",
          fieldName: "",
          formType: FieldTypeMappingEnum.Text,
          isNull: Number(false),
          renderCell: (h: any, column: any, row: TableValueType) => {
            return row.question
          }
        }
      ]
      
      return settingListFieldsToColumns(fields)
      
    },
    tableValue(): TableValueType[] {
      return this.similarQuestions.map((question) => {
        return {
          question
        }
      })
    },
    settingGPTViewTableComponent(): SettingGPTViewTableComponent {
      return this.$refs.SettingGPTViewTable as SettingGPTViewTableComponent
    }
  },
  methods: {
    clearSelection() {
      this.handleSelectionChange()
      this.settingGPTViewTableComponent.clearSelection()
    },
    fetchGenerateSimilarQuestionsImpl() {
      
      if (isFalsy(this.insideQuestion)) {
        return
      }
      
      this.clearSelection()
      
      const params = {
        question: this.insideQuestion,
        tenantId: this.tenantId
      }
      
      this.fetchGenerateSimilarQuestions(params)
      
    },
    open(question?: string) {
      this.insideQuestion = question || this.question
      this.fetchGenerateSimilarQuestionsImpl()
      this.settingGPTViewDialogComponent.open()
    },
    onConfirmHandler() {
      
      const multipleSelection = this.settingGPTViewTableComponent.getSelection()
      const questions = multipleSelection.map(item => item.question)
      
      this.$emit(SettingGPTSimilarQuestionDialogEventEnum.Confirm, questions)
      
      this.settingGPTViewDialogComponent.close()
      
    },
    onInsideQuestionChangeHandler(value: string) {
      this.insideQuestion = value
    },
    onReGenerateHandler() {
      this.fetchGenerateSimilarQuestionsImpl()
    },
    renderHeader() {
      return (
        <div class="setting-gpt-similar-question-dialog-header">
          <el-input
            placeholder="请输入问题"
            maxlength={50}
            value={this.insideQuestion}
            disabled={this.loading}
            onInput={this.onInsideQuestionChangeHandler}
          >
          </el-input>
          <el-button
            type="primary"
            disabled={this.loading}
            onClick={this.onReGenerateHandler}
          >
            重新生成
          </el-button>
        </div>
      )
    },
    renderContent() {
      
      const attrs = {
        directives: [
          {
            name: 'loading',
            value: this.loading
          }
        ]
      }
      
      return (
        <div class="setting-gpt-similar-question-dialog-content">
          <SettingGPTViewTable
            {...attrs}
            key="SettingGptSimilarQuestionDialogTable"
            ref="SettingGPTViewTable"
            columns={this.columns}
            data={this.tableValue}
            showTableSelection
            isManualGetSelection
            multipleSelection={this.multipleSelection}
            onChangeSelection={this.handleSelectionChange}
          >
          </SettingGPTViewTable>
        </div>
      )
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTSimilarQuestionDialog}>
        <SettingGPTViewDialog
          ref="SettingGPTViewDialog"
          title="自动生成相似问题"
          confirmText="确认添加"
          disabled={this.loading}
          onConfirm={this.onConfirmHandler}
        >
          
          {this.renderHeader()}
          {this.renderContent()}
          
        </SettingGPTViewDialog>
      </div>
    )
  }
})